<template>
    <v-form @submit.native.prevent="onSubmit" class="md-form">
        <v-subheader>修改用户资料</v-subheader>
        <upload-avatar v-model="data.avatar"/>
        <v-text-field label="用户名称" v-model="data.name" :error-messages="errors.name"/>
        <v-text-field label="邮箱地址" v-model="data.email" :error-messages="errors.email" type="email"/>
        <v-text-field label="手机号码" v-model="data.phone" :error-messages="errors.phone" type="phone"/>
        <v-text-field label="旧密码" v-model="data.password" :error-messages="errors.password" type="password"/>
        <v-text-field label="新密码" v-model="data.new_password" :error-messages="errors.new_password" type="password"/>
        <v-text-field label="确认新密码" v-model="data.new_password_confirmation" :error-messages="errors.new_password_confirmation" type="password"/>
        <v-textarea outlined v-model="data.desc" label="简介" :error-messages="errors.desc"/>
        <slot/>
    </v-form>
</template>

<script>
    import vModeObject from "@/components/mixins/vModeObject";
    import UploadAvatar from "@/components/widget/UploadAvatar";

    export default {
        name: "ProfileForm",
        components: {UploadAvatar},
        mixins: [vModeObject],
        data () {
            return {
                rules: {
                    name: 'required|string|max:32|min:2',
                    email: 'required|string|email|max:64',
                    phone: ['nullable', 'max:11', 'min:11', 'regex:/^1[3456789]\\d{9}$/'],
                    password: 'nullable|string|min:6',
                    new_password: 'nullable|string|confirmed',
                    new_password_confirmation: 'nullable|string|min:6',
                    desc: 'nullable|string|max:255'
                }
            }
        }
    }
</script>

<style scoped>

</style>